Reliance Network Quick Search Redirect Widget
The Reliance Network Quick Search Redirect Widget, when added to your custom web site, allows users to enter search criteria and initiate a search; when the form is submitted, the user will be redirect the search results on your Reliance Network web site.

General Use
To use the Reliance Network Quick Search Redirect Widget on your web site simply add the following script tag to your web page:
<script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=quicksearchredirect &amp;token=[Token] &amp;fields=[Search Field Codes] &amp;button=[Button Text] &amp;newwindow=[New Window] &amp;s=[Marketing Source Code]&amp;placeholder=[Place Holder Text]"></script>

Tip: for a more reliable display accross multiple browsers add a DOCTYPE declaration to the top of your web page.

QueryString Parameters
Parameter Required Description
[Token] Yes Replace with the the token found on the Widgets tab under Site Builder in your Reliance Network intranet.
[Search Field Codes] No Replace with a pipe (|) delimited list of supported search field codes (e.g. mn|mx|bd|ba; see list below). Note: the order in which you specify the list of fields will dictate the order the fields are rendered for the control.
[Button Text] No Replace with the text you want to appear on the button. If not specified the default text of "Search" will be used.
[New Window] No Replace with true or false to open the results in a new window or in the same window respectively. If not specified the results will open in the same window by default.
[Marketing Source Code] No Replace with a marketing source code for tracking where a site visit originated from.
[Place Holder Text] No Replace with the text to display in the suggestion textbox.

Search Field Codes
Code Description
cz (always visible) A textbox with city suggestion feature to specify what City or Zip Code to search in.
p A group of checkboxes to specify which Property Types to search for.
mn A dropdown list to specify a Minimum Price.
mx A dropdown list to specify a Maximum Price.
bd A dropdown list to specify a minimum number of Bedrooms.
ba A dropdown list to specify a minimum number of Bathrooms.

Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>My Web Site</title>
    </head>
    <body>

        <div style="width:206px">
            <script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=quicksearchredirect?token=ABCDEF&amp;fields=p|mn|mx|bd|ba"></script>
        </div>

    </body>
</html>
.


Advanced Topics
You can alter the style/layout of the control by adding a stylesheet with the supported classes to your web page.
Class Description
.rn-qsr Applies to the div element that contains the form.
.rn-qsr-label Applies to all field labels.
.rn-qsr-[item] Applies to the specified [item] which corresponds to a search field code (e.g. rn-qsr-mn will alter the style for the minimum price item). An item is a div element which contains a field and it's label.
.rn-qsr-[item]-f Applies to the specified [item]'s field (e.g. rn-qsr-mn-f will alter the style for the minimum price field).
.rn-qsr-[item]-l Applies to the specified [item]'s label (e.g. rn-qsr-mn-l will alter the style for the minimum price label).
.rn-qsr-button Applies to the submit button.
.rn-qsr-p-f-[proptype] Applies to the specified [proptype] option. Typically used to remove a property type option.

Note: [proptype] is case-sensitive and should contain only the letters of the property type (i.e. no spaces, special characters, or numbers; e.g. to hide: "Single-Family" specify SingleFamily, "Condo/Townhouse" specify CondoTownhouse, "Vacant Land" specify VacantLand, etc.). Also, the names of property types can change at anytime if your company decides to do so, so you may need to update your styles if that happens.

Default Style Definitions
You can copy and paste these style definitions into your web page and use them as a starting point.
.ui-autocomplete-loading {
background: white url("ui-anim_basic_16x16.gif") right center no-repeat;
}
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
body {
font-family: Arial, Helvetica, sans-serif;
}

table {
font-size: 1em;
}

.ui-draggable, .ui-droppable {
background-position: top;
}


.rn-qsr { width:210px }
.rn-qsr, .rn-qsr input, .rn-qsr select { font-family:Arial, Sans-Serif; font-size:8pt }
.rn-qsr-label { clear:both; font-weight:bold; margin-top:6px }
.rn-qsr .rn-qsr-button { margin-top:6px; font-size:10pt; width:62px }
.rn-qsr-cz, .rn-qsr-p, .rn-qsr-mn, .rn-qsr-mx, .rn-qsr-bd, .rn-qsr-ba { float:left }
.rn-qsr .rn-qsr-cz-f { font-size:12pt; width:206px }
.rn-qsr-p-f label { margin-top:2px; font-size:9pt }
.rn-qsr .rn-qsr-mn-f, .rn-qsr .rn-qsr-mx-f { width:102px; font-size:9pt }
.rn-qsr-mn, .rn-qsr-bd { margin-right:6px }
.rn-qsr .rn-qsr-ba-f, .rn-qsr .rn-qsr-bd-f { width:80px; font-size:9pt }

/* Location suggestion titles */
.rn-search-location-title {
position: relative;
float: left;
height: 20px;
border-top-width:1px;
border-top-style:solid;
}
.rn-search-location-title > div {
position: absolute;
left: 2px;
top: 2px;
font-size:14px !important;
font-weight:bold !important;
font-style:normal !important;
}
.rn-search-location-container .rn-search-location-highlight { min-width:100%; }

.rn-suggestionfield {
height: auto !important;
overflow: hidden !important;
min-width: 400px;
border:1px solid #000 !important
}
.rn-suggestionfield > div { width:100% !important;}

.rn-search-location-title {
background-color: #d1d3d4;
font-family: Helvetica,'Oswald',Arial,'Lucida Grande',sans-serif;
}

#div_addressearchmultiresult span {
color:#000 !important;
font-family: Arial,sans-serif;
font-size: 12px;
}

#div_addressearchmultiresult {
background-color:#fff;
position:absolute;
z-index:1000;
float: left;
display: none;
padding: 5px;
line-height: 21px;
cursor: pointer;
border: 1px solid #888;
}

div.rn-search-location-title div {
/*overflow:auto;*/
position:absolute;
z-index:1000;
}

.rn-qsr-clearctr {
position:relative;
clear:both;
overflow:hidden;
height: 1px;
}
.

Example – Changing the submit button from a standard button () to an image (Search)
  1. Add a stylesheet to your web page with a definition for the .rn-qsr-button class and set the style properties for it.
  2. Add the button parameter to the script tag with no value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>My Web Site</title>
    </head>
    <body>

        <div style="width:206px">
            <style type="text/css">
                .rn-qsr .rn-qsr-button {
                    border: 0;
                    background: transparent url(https://media.reliancenetwork.com/media/global/search/buttons/button_search.gif); /* Replace with url to your image */
                    width: 150px; /* Replace with width of your image */
                    height: 26px; /* Replace with height of your image */
                    cursor: pointer;
                    position: relative;
                    left: 28px; /* To center-align; based on width of div below (206) minus the image width (150) divided by 2 (i.e. 206 - 150 = 56; 56 / 2 = 28) */
                }
            </style>
            <script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=quicksearchredirect&amp;token=ABCDEF&amp;fields=p|mn|mx|bd|ba&amp;button="></script>
        </div>

    </body>
</html>
.

Example – Hiding the "Vacant Land" and "Commerial" Property Types
  1. Add a stylesheet to your web page with a definition for the .rn-qsr-p-f-VacantLand and .rn-qsr-p-f-Commercial classes and set the display property to none.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>My Web Site</title>
    </head>
    <body>

        <div style="width:206px">
            <style type="text/css">
                .rn-qsr-p-f-VacantLand, .rn-qsr-p-f-Commercial { display:none }
            </style>
            <script type="text/javascript" src="https://www.reliancenetwork.com/widgets?file=quicksearchredirect&amp;token=ABCDEF&amp;fields=p|mn|mx|bd|ba"></script>
        </div>

    </body>
</html>
.